import {i18n, Segment, SegmentGroup, Tooltip} from "plain-design";
import {createPPTOptionUser} from "../../../packages";
import {AppRouter} from "../../AppRouter";

export const usePPTOption = createPPTOptionUser({
  availableAIConfigs: [
    {
      name: 'doubao-1.5-lite-32k',
      config: {
        url: 'https://ark.cn-beijing.volces.com/api/v3/chat/completions',
        key: 'a0311f2a-ba85-4428-b158-0f2f99d0d238',
        model: 'doubao-1-5-lite-32k-250115',
      },
    },
    {
      name: 'doubao-1-5-pro-32k',
      config: {
        url: 'https://ark.cn-beijing.volces.com/api/v3/chat/completions',
        key: 'a0311f2a-ba85-4428-b158-0f2f99d0d238',
        model: 'doubao-1-5-pro-32k-character-250228',
      },
    },
    {
      name: 'qwen-turbo',
      config: {
        url: 'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions',
        key: 'sk-b7c7699ec5ab49909b7b80f57eaf6252',
        model: 'qwen-turbo'
      },
    },
    {
      name: 'deepseek-v3',
      config: {
        url: "https://ark.cn-beijing.volces.com/api/v3/chat/completions",
        key: "a0311f2a-ba85-4428-b158-0f2f99d0d238",
        model: "deepseek-v3-250324"
      },
    },
  ]
});

usePPTOption.use(option => {
  /**
   * 顶部中间切换示例页面
   * @author  韦胜健
   * @date    2025/5/9 14:37
   */
  option.hooks.onRenderHeadCenter.use({
    processor: ({ render, list }) => {list.push({ render, key: 'unknown', seq: 1 });},
    render: () => {
      return (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          {/*<img src={pathJoin(__webpack_public_path__, 'images/plain-ppt.png')} style={{ height: '1.5em', marginRight: '0.5em' }}/>
          <span style={{ fontWeight: '500', fontFamily: `-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'` }}>
            PLAIN-PPT
          </span>*/}
        </div>
      );
    },
  });

  /*option.hooks.onRenderHeadLeft.use({
    processor: ({ render, list }) => {list.push({ render, key: 'logo', seq: -1 });},
    render: () => (
      <img src={pathJoin(__webpack_public_path__, 'images/plain-ppt.png')} style={{ height: '1.5em', marginRight: '0.5em' }}/>
    )
  });*/

  option.hooks.onRenderFoot.use({
    processor: ({ list, render }) => {list.push({ render, key: 'copy_right', seq: 1 });},
    render: () => <span>©2024-2025仁胜教育公司版权所有</span>
  });


  const segments: {
    val?: string,
    tip?: () => string,
    label: () => string,
    handler: () => void,
  }[] = [
    {
      val: 'template_1',
      label: () => i18n.$intl('PLAIN_PPT.template01').d('模板01'),
      handler: () => {
        option.state.exampleDataName = 'template_1';
        option.state.utils.loadExampleData(option.state.exampleDataName);
      }
    },
    {
      val: 'template_2',
      label: () => i18n.$intl('PLAIN_PPT.template02').d('模板02'),
      handler: () => {
        option.state.exampleDataName = 'template_2';
        option.state.utils.loadExampleData(option.state.exampleDataName);
      }
    },
    {
      val: 'template_3',
      label: () => i18n.$intl('PLAIN_PPT.template03').d('模板03'),
      handler: () => {
        option.state.exampleDataName = 'template_3';
        option.state.utils.loadExampleData(option.state.exampleDataName);
      }
    },
    {
      val: 'template_4',
      label: () => i18n.$intl('PLAIN_PPT.template04').d('模板04'),
      handler: () => {
        option.state.exampleDataName = 'template_4';
        option.state.utils.loadExampleData(option.state.exampleDataName);
      }
    },
    {
      label: () => i18n.$intl('PLAIN_PPT.blankPage').d("空白页面"),
      tip: () => i18n.$intl('PLAIN_PPT.goBlankPage').d('跳转到空白页面以测试内存释放'),
      handler: () => {AppRouter.history.push('/blank');}
    }
  ];

  option.hooks.onRenderBottom.use({
    processor: ({ list, render }) => {list.push({ render, key: 'switch_template', seq: 99 });},
    render: () => (
      <SegmentGroup size="mini" modelValue={option.state.exampleDataName}>
        {segments.map((segment, index) => {
          const content = <Segment label={segment.label()} key={segment.val ?? index} val={segment.val ?? index} onClick={segment.handler}/>;
          return segment.tip ? <Tooltip key={segment.val ?? index} message={segment.tip()}>{content}</Tooltip> : content;
        })}
      </SegmentGroup>
    )
  });
});
